<template>
  <div id="mountNode"></div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import G6 from "@antv/g6";
import topoData from './topo.json'

@Component({
  components: {},
})
export default class HomeView extends Vue {
  mounted() {
    console.log('topoData', topoData)
    this.handleInitTopo();
  }

  handleInitTopo() {
    console.log("init");
    const graph = new G6.Graph({
      container: "mountNode", // 创建的容器 id 或容器本身
      width: window.innerWidth - 120, // Number，图的宽度
      height: window.innerHeight - 120, // Number，图的高度
    });
    const data = {
      // 点集
      nodes: [
        {
          id: "node1", // String，该节点存在则必须，节点的唯一标识
          x: 100, // Number，可选，节点位置的 x 值
          y: 200, // Number，可选，节点位置的 y 值
        },
        {
          id: "node2", // String，该节点存在则必须，节点的唯一标识
          x: 300, // Number，可选，节点位置的 x 值
          y: 200, // Number，可选，节点位置的 y 值
        },
      ],
      // 边集
      edges: [
        {
          source: "node1", // String，必须，起始点 id
          target: "node2", // String，必须，目标点 id
        },
      ],
    };
    graph.data(data); // 读取 Step 2 中的数据源到图上
    graph.render(); // 渲染图
  }
}
</script>

<style scoped>
#home {
  width: 100%;
  height: 100%;
}
</style>
